import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'

/** 商品字段属性 */
export interface ProductFieldProperty {
  // 是否显示
  show: boolean
  // 颜色
  color: string
}

/** 商品卡片属性 */
export interface ProductCardProperty {
  // 布局类型：单列大图 | 单列小图 | 双列
  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'
  // 商品字段
  fields: {
    // 商品名称
    name: ProductFieldProperty
    // 商品简介
    introduction: ProductFieldProperty
    // 商品价格
    price: ProductFieldProperty
    // 市场价
    marketPrice: ProductFieldProperty
    // 商品销量
    salesCount: ProductFieldProperty
    // 商品库存
    stock: ProductFieldProperty
  }
  // 角标
  badge: {
    // 是否显示
    show: boolean
    // 角标图片
    imgUrl: string
  }
  // 按钮
  btnShow: boolean
  // 按钮类型
  btnType: {
    type: 'buy' | 'cart'
  }
  // 购买按钮
  btnBuy: {
    type: 'text' | 'img'
    text: string
    bgBeginColor: string
    bgEndColor: string
    imgUrl: string
  }
  // 购物车按钮
  btnCart: {
    type: 'text' | 'img'
    text: string
    bgBeginColor: string
    bgEndColor: string
    imgUrl: string
  }
  // 上圆角
  borderRadiusTop: number
  // 下圆角
  borderRadiusBottom: number
  // 间距
  space: number
  // 商品编号列表
  spuIds: number[]
  // 活动主题编号列表
  topicIds: number[]
  // 组件样式
  style: ComponentStyle
  title: string
  titleIcon: string
  moreIcon: string
  moreLink: string
}

// 定义组件
export const component = {
  id: 'CalenderActivityProductCard',
  name: '活动商品列表',
  icon: 'fluent:text-column-two-left-24-filled',
  property: {
    layoutType: 'oneColBigImg',
    fields: {
      name: { show: true, color: '#000' },
      introduction: { show: true, color: '#666' },
      price: { show: true, color: '#ff4d4f' },
      marketPrice: { show: true, color: '#999' },
      salesCount: { show: true, color: '#999' },
      stock: { show: true, color: '#999' }
    },
    badge: { show: false, imgUrl: '' },
    btnShow: true,
    btnType: {
      type: 'buy'
    },
    btnBuy: {
      type: 'text',
      text: '立即购买',
      bgBeginColor: '#ff4d4f',
      bgEndColor: '#ff7875',
      imgUrl: ''
    },
    btnCart: {
      type: 'text',
      text: '加入购物车',
      bgBeginColor: '#ff4d4f',
      bgEndColor: '#ff7875',
      imgUrl: ''
    },
    borderRadiusTop: 8,
    borderRadiusBottom: 8,
    space: 8,
    spuIds: [],
    topicIds: [],
    style: {
      bgType: 'color',
      bgColor: '',
      marginLeft: 8,
      marginRight: 8,
      marginBottom: 8
    } as ComponentStyle,
    title: '热门商品',
    titleIcon: '',
    moreIcon: '',
    moreLink: ''
  }
} as DiyComponent<ProductCardProperty>
